import { View, Image, Text } from '@tarojs/components';
import { AtIcon } from 'taro-ui';
// import Taro from '@tarojs/taro';
import OrderTimeDown from '../../component/OrderTimeDown';
import OrderAddress from '../../component/OrderAddress';
import ProductItem from '../../component/ProductItem';
import OrderAmount from '../../component/OrderAmount';
import CallPhone from '../../component/CallPhone';
import OrderNumber from '../../component/OrderNumber';

export default function ({ orderDetail, productInfo, shopInfo }) {
  const { address, userName, userPhone } = orderDetail;
  const { phone } = shopInfo;
  const skuInfo = {
    name: productInfo.desc,
    price: productInfo.price,
    count: productInfo.count,
  };
  return (
    <View className="wait-pay-container">
      <OrderTimeDown orderDetail={orderDetail} />
      <OrderAddress orderType={orderDetail.orderType} address={address} userName={userName} userPhone={userPhone} />
      <View className="section-block">
        <View className="shop-logo">
          <Image src={shopInfo.logo} />
          <Text>{shopInfo.name}</Text>
          <AtIcon value="chevron-right" size={20} color="#CCCCCC" />
        </View>
        <ProductItem product={productInfo} skuInfo={skuInfo} count={skuInfo.count} />
      </View>
      <CallPhone text="联系商家" phone={phone} />
      <OrderAmount orderDetail={orderDetail} />
      <OrderNumber orderDetail={orderDetail} />
      {/* <OrderButton orderDetail={orderDetail} onCancel={onCancel} onPay={onPay} /> */}
    </View>
  );
}
